<script setup>
import {onMounted, reactive} from "vue";
import EditorBox from "../../components/Editor.vue";
import { getCommentInfo } from '../../api/echartsData'
import rootComment from './rootComment.vue'
import childComment from './childComment.vue'
import ChildComment from "@/views/CommentView/childComment.vue";
components: { EditorBox, rootComment, childComment }
onMounted(()=>{
  getCommentData()
})

let commentList = reactive({
  commentList: []
})
const getCommentData=async ()=>{
  const res = await getCommentInfo()
  commentList.commentList = res.data
  console.log(commentList.commentList)
}

</script>
<template>
  <div class="comment-list-container">
      <div class="comment-list-box comment-operate-item">
        <ul class="comment-list" v-for="comment in commentList.commentList" :key="comment.id">
          <rootComment :rootComment="comment"></rootComment>
          <li class="replay-box" style="display: block;">
            <ul class="comment-list">
              <!-- 子组件递归实现 -->
              <ChildComment :childComments="comment.child" v-if="comment.child != null"></ChildComment>
            </ul>
          </li>
        </ul>
      </div>

    <!--    <EditorBox />-->
  </div>
</template>
<style lang="scss" scoped>
.comment-list-container {
  margin-right: 200px;
}
</style>